import React from "react"
import {NavLink} from "react-router-dom"
import $ from "jquery"
import "./../md/MyAjax.js"

import "./../scss/Search.scss";
class SearchHeader extends React.Component {
	constructor (props) {
		super(props);
		this.tap = this.tap.bind(this);
		this.keyup = this.keyup.bind(this);
		this.state = {
			searchList :[]
		}
	}
	tap(){
		window.history.go(-1);
	}
//	http://w.lefeng.com/api/neptune/search/search_by_keyword/v1?keyword=199
	keyup(){
		var list = document.getElementById("list")
		var that = this;
		var val = this.refs.tet.value;
		if(val == ""){
			list.style.display = "none";
		}else{
			list.style.display = "block";
		}
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/search/suggestion/v1?keyword="+val+"&count=15",
			success:function(data){
				var arr = data.data;
				var arr1=[]
				arr.map(function(item,index){
					arr1.push(<li key={index}>{item}</li>)
				})
					that.setState({searchList:arr1})
					
			}
		});
	}
	render() {
		return (
			<div id="hotSearch">
				<input type="text" id="tex" ref="tet" placeholder = "静佳集团" onKeyUp={this.keyup}/>
				<input type="button" id="btn" value = "取消" onClick ={this.tap} />
				<NavLink to="/home"><i className="iconfont icon-zhuye"></i></NavLink>
				<ul id="list">
					{this.state.searchList}
				</ul>
			</div>
		)
	}
}
export default SearchHeader;